<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <title>完善信息-协议</title>
    <link href="{{asset('vendor/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('css/buz/style.css')}}" />
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="{{asset('js/buz/jquery.min.js')}}"></script>
    <script src="{{asset('js/buz/commonLogin.js')}}"></script>
    <script src="{{asset('vendor/bootstrap/js/bootstrapValidator.js')}}"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="{{asset('vendor/bootstrap/js/bootstrap.min.js')}}"></script>
    <!--[if lte IE 9]>
    <script type="text/javascript">
        window.location.href = "/ie";
    </script>
    <![endif]-->
</head>
<body class="bgwhite">
<div id="header">
    <div class="container-fluid">
        <div class="navbar row">
            <div class="navbar-header col-xs-5 col-sm-3 col-md-2">
                <a class="navbar-brand col-xs-12 col-sm-12 col-md-12" href="index.html">
                    <img src="{{asset('image/logo1.png')}}" class="right" width="150px" height="60px" style="margin-top:10px ;" />
                </a>
            </div>
            <nav class="top-nav col-xs-7 col-sm-9 col-md-10 padd">
                <div class="nav navbar-nav col-md-12 col-sm-12 col-xs-12 padd">
                    <div style="text-align: center; line-height: 77px; font-size: 18px; font-weight: bold;" class="col-md-11 col-xs-8">
                        实名认证
                    </div>
                    <div class="pull-right col-md-1  col-xs-4">
                        <i class="m-zhxx "></i>
                    </div>
                </div>

            </nav>
        </div>
    </div>
    <!-- Start .header-inner -->
</div>
<!--
        	作者：
        	时间：2017-11-22
        	描述：实名认证的信息进度条
        -->
<div class="info" style="margin-top: 80px;">
    <ul class="col-xs-12 col-ms-12 col-md-10 col-md-push-1" style="margin-top: 40px;">
        <li class="col-xs-4 col-ms-4 col-md-4">
            <cite class="circle bg5B">1</cite>
            <span class="line"></span>
        </li>
        <li class="col-xs-4 col-ms-4 col-md-4">
            <cite class="circle">2</cite>
            <span class="line"></span>
        </li>
        <li class="col-xs-4 col-ms-4 col-md-4">
            <cite class="circle">3</cite>
        </li>
    </ul>
    <ul class="col-xs-12 col-ms-12 col-md-10 col-md-push-1 mt20 textC">
        <li class="col-xs-4 col-ms-4 col-md-4 color5B">
            技术协议
        </li>
        <li class="col-xs-4 col-ms-4 col-md-4 color5B">
            基本信息
        </li>
        <li class="col-xs-4 col-ms-4 col-md-4 color5B">
            结算信息
        </li>
    </ul>
</div>
<div class="container padd mt20" >
    <form class="form-horizontal member" role="form" id="settlemetForm">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">开户名</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="username">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">账户类型</label>
                    <div class="col-sm-8">
                        <label class="radio-inline">
                            <input type="radio" value="0" name="classify" />&nbsp;个人
                        </label>
                        <label class="radio-inline">
                            <input type="radio" value="1" name="classify" checked="checked"/>&nbsp;企业
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">开户账号</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="account">
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label for="name" class="col-sm-3 control-label">开户银行</label>
                    <div class="col-sm-8">
                        <select class="form-control col-sm-3" name="category" id="category">

                        </select>
                    </div>
                </div>
            </div>
            {{--<div class="col-sm-6">--}}
                {{--<div class="form-group">--}}
                    {{--<label for="firstname" class="col-sm-3 control-label">是否默认</label>--}}
                    {{--<div class="col-sm-8">--}}
                        {{--<label class="radio-inline">--}}
                            {{--<input type="radio" value="0" name="is_default" checked="checked" />&nbsp;否--}}
                        {{--</label>--}}
                        {{--<label class="radio-inline">--}}
                            {{--<input type="radio" value="1" name="is_default" />&nbsp;是--}}
                        {{--</label>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
        </div>
        <div class="row">

            <div class="col-sm-6">
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">通讯地址</label>

                    <div class="col-sm-4">
                        <select class="form-control" id ="SelProvince" >
                            <option value="">请选择省</option>
                        </select>
                    </div>
                    <div class="col-sm-4">
                        <select class="form-control" id ="SelCity" name="city_id"  disabled>
                            <option value="" class="default">请选择市</option>
                        </select>
                    </div>

                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="name" class="col-sm-3 control-label">分支行</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="branch">
                    </div>
                </div>
            </div>
        </div>
        <div class="row companyAttr" id="bank_number">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="name" class="col-sm-3 control-label">联行号</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="number">
                    </div>
                    <div class="col-sm-3">
                        <a class="btn btn-default" href="http://www.lianhanghao.com/" target="_blank" role="button">查询联行号</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label"></label>
                    <div class="col-sm-8">
                        <button type="button" class="btn btn-primary" onclick="confirmSettlement()">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
{{--警告弹窗--}}
<div class="modal fade in"  tabindex="-1" role="dialog" id="errorModel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <h4 class="text-center"></h4>
            </div>
            <div class="modal-footer text-xs-center">
                <button type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<script src="{{asset('js/buz/template-web.js')}}"></script>
<script id="provinceOption" type="text/html">
    @{{each data  value }}
    <option value="@{{ value.id}}">@{{ value.name}}</option>
    @{{/each}}
</script>
<script id="cityOption" type="text/html">
    @{{each data  value }}
    <option value="@{{ value.id}}">@{{ value.name}}</option>
    @{{/each}}
</script>

<script id="bankOption" type="text/html">
    @{{each data  value }}
    <option value="@{{ value.id}}">@{{ value.name}}</option>
    @{{/each}}
</script>
<script>
    $("input[name='classify']").change(function() {
        if ($(this).val() == 0) {
            $('#bank_number').hide();
        } else {
            $('#bank_number').show();
        }

    });
    $('#settlemetForm').bootstrapValidator({
        message: '这个值没有被验证',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: '开户名不能为空',
                validators: {
                    notEmpty: {
                        message: '开户名不能为空'
                    }

                }
            },
            account: {
                message: '开户账号不能为空',
                validators: {
                    notEmpty: {
                        message: '开户账号不能为空'
                    }
                }
            },
            category: {
                message: '银行类型不能为空',
                validators: {
                    notEmpty: {
                        message: '银行类型不能为空'
                    }
                }
            },
            city_id: {
                message: '省市不能为空',
                validators: {
                    notEmpty: {
                        message: '省市不能为空'
                    }
                }
            },
            branch: {
                message: '开户分支行不能为空',
                validators: {
                    notEmpty: {
                        message: '开户分支行不能为空'
                    }
                }
            },
            number: {
                message: '联行号不能为空',
                validators: {
                    excluded: function () {
                        var classify = $('input[name="classify"]').val();
                        if (classify == 1) {
                            return true;
                        }
                        return false;
                    },
                    notEmpty: {
                        message: '联行号不能为空'
                    }
                }
            }
        }
        });
    function confirmSettlement() {
        var bootstrapValidator = $('#settlemetForm').data("bootstrapValidator");
        bootstrapValidator.validate();
        if(bootstrapValidator.isValid()){
            var data = $("#settlemetForm").serialize();
            console.log(data);
            $.ajax({
                url: "/api/profile/remit",
                data: data,
                type: 'post',
                success:function(data){
                    if(filterAjaxData(data)){
                        window.location.href="/index";
                    }

                }

            });
        }
    }
    $(function () {
        //初始化省
        $.ajax({
            url: "/api/tool/cities",
            type: 'get',
            success: function (data) {
                if (filterAjaxData(data)) {
                    console.log(data);
                    var provinceHtml = template('provinceOption', data);
                    $("#SelProvince").append(provinceHtml);

                } else {
                    showMsg(data.message);
                }
            }
        });
        //选择市
        $("#SelProvince").change(function () {
            var _id = $(this).val();

            console.log(_id);
            $.ajax({
                url: "/api/tool/cities?parent=" + _id,
                type: 'get',
                success: function (data) {
                    if (filterAjaxData(data)) {
                        console.log(data);
                        $("#SelCity").attr("disabled", false);
                        var cityHtml = template('cityOption', data);
                        $("#SelCity .default").siblings().remove();
                        $("#SelCity").append(cityHtml);

                    } else {
                        showMsg(data.message);
                    }
                }
            })
        });


        //初始化银行
        $.ajax({
            url: "/api/tool/banks",
            type: 'get',
            success: function (data) {
                if (filterAjaxData(data)) {
                    console.log(data);
                    var SelBusiTypeHtml = template('bankOption', data);
                    $("#category").append(SelBusiTypeHtml);

                } else {
                    showMsg(data.message);
                }
            }


        });
    })
    //	计算line的宽度
    var width=$(".line").width();
    var left=$(".circle").position().left;
    $(".line").css({"width":(width-40)+"px"});
    $(".line").css({"left":(left+40)+"px"});
</script>
</body>



</html>
